<template>
  <div class="customerInfo">
    <div class="locationButton">
      <template v-for="val in btnVal">
        <el-button type="primary" @click="onSubmit(val)">{{ val }}</el-button>
      </template>
    </div>
    <el-form :model="customer" :rules="rules" ref="customer" label-position="left" label-width="90px" :inline="true">
      <div class="customer-item">
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="客户编号">
              <el-input v-model="customer.code" disabled placeholder="客户编号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户名称" prop="name">
              <el-input v-model="customer.name" placeholder="客户名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3" prop="areaId">
            <el-form-item label="地区">
              <el-select v-model="customer.areaId" placeholder="请选择">
                <el-option v-for="area in areaOptions" :key="area.id" :label="area.name" :value="area.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户经理" prop="userId">
              <el-select v-model="customer.userId" placeholder="请选择">
                <el-option v-for="manager in managerOptions" :key="manager.id" :label="manager.username"
                  :value="manager.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="客户等级" prop="levelId">
              <el-select v-model="customer.levelId" placeholder="请选择">
                <el-option v-for="level in levelOptions" :key="level.id" :label="level.name" :value="level.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="客户满意度" prop="agreeLevel">
              <el-select v-model="customer.agreeLevel" placeholder="请选择">
                <el-option v-for="star in levelStar" :key="star.id" :label="star.info" :value="star.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户信誉度" prop="creditLevel">
              <el-select v-model="customer.creditLevel" placeholder="请选择">
                <el-option v-for="star in levelStar" :key="star.id" :label="star.info" :value="star.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="customer-item">
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="地址" prop="address">
              <el-input v-model="customer.address" placeholder="地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="邮政编码" prop="postcode">
              <el-input v-model="customer.postcode" placeholder="邮政编码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="customer.phone" placeholder="电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="传真" prop="fax">
              <el-input v-model="customer.fax" placeholder="传真"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="网址" prop="website">
              <el-input v-model="customer.website" placeholder="网址"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <div class="customer-item">
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="营业执照" prop="bussinessCode">
              <el-input v-model="customer.bussinessCode" placeholder="营业执照"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="法人" prop="legalPerson">
              <el-input v-model="customer.legalPerson" placeholder="法人"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="注册资金" prop="regsMoney">
              <el-input v-model="customer.regsMoney" placeholder="注册资金"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="年营业额" prop="bussinessMoney">
              <el-input v-model="customer.bussinessMoney" placeholder="年营业额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="开户银行" prop="regBank">
              <el-input v-model="customer.regBank" placeholder="开户银行"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="银行账号" prop="bankAccount">
              <el-input v-model="customer.bankAccount" placeholder="银行账号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="10" :offset="3">
            <el-form-item label="地税登记号" prop="landtaxCode">
              <el-input v-model="customer.landtaxCode" placeholder="地税登记号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="国税登记号" prop="nationaltaxCode">
              <el-input v-model="customer.nationaltaxCode" placeholder="国税登记号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'CustomerInfo',
    data() {
      return {
        juese: '',
        customer: {},
        btnVal: ['帮助', '联系人', '交往记录', '历史订单', '返回', '保存'],
        areaOptions: [],
        managerOptions: [],
        levelOptions: [],
        agreeLevelOptions: [],
        creditLevelOptions: [],
        rules: {
          name: [
            { required: true, message: '请输入客户名称', trigger: 'blur' },
            { max: 20, message: '最多20个字符', trigger: 'blur' }
          ],
          areaId: [{
            required: true, message: '请选择地区'
          }],
          userId: [{
            required: true, message: '请选择客户经理'
          }],
          levelId: [{
            required: true, message: '请选择客户等级'
          }],
          agreeLevel: [{
            required: true, message: '请选择满意度'
          }],
          creditLevel: [{
            required: true, message: '请选择信誉度'
          }],
          address: [
            { required: true, message: '请输入地址' },
            { max: 20, message: '最多20个字符', trigger: 'blur' }
          ],
          postcode: [{
            validator: this.$validator.checkPostcode
          }],
          phone: [
            { validator: this.$validator.checkTelePhone }
          ],
          fax: [{
            validator: this.$validator.checkFax
          }],
          bussinessCode: [{
            max: 20, message: '最多20个字符', trigger: 'blur'
          }],
          regsMoney: [{
            validator: this.$validator.checkMoney,message: '注册资金不符合规范'
          }],
          regBank: [{
            max: 20, message: '最多20个字符', trigger: 'blur'
          }],
          bankAccount:[{
            max: 20, message: '最多20个字符', trigger: 'blur'
          }],
          legalPerson: [{
            max: 12, message: '最多12个字符', trigger: 'blur'
          }],
          bussinessMoney: [{
            validator: this.$validator.checkMoney, message: '年营业额不符合规范'
          }]
        },
        optionsArr: [{
          url: 'customer/areaInfo',
          prop: 'areaOptions'
        }, {
          url: 'customer/managerInfo',
          prop: 'managerOptions'
        }, {
          url: 'customer/levelInfo',
          prop: 'levelOptions'
        }],
        levelStar: [],
      }
    }, methods: {
      getRouterData() {
        this.customer = JSON.parse(sessionStorage.getItem('customer'));
      }, onSubmit(val) {
        console.log(val);
        switch (val) {
          case '帮助':
            break;
          case '联系人':
            this.$router.push({ name: 'contact' });
            break;
          case '交往记录':
            this.$router.push({ name: 'relationship' });
            break;
          case '历史订单':
            this.$router.push({ name: 'orders' });
            break;
          case '返回':
            this.$router.replace({ name: 'L0201' });
            break;
          case '保存':
            this.handleEdit();
            break;
        }
      }, handleEdit() {
        this.$refs['customer'].validate((valid) => {
          if (valid) {
            this.sendeRequest('put', 'customer/customerInfo/edit', this.customer);
            sessionStorage.setItem('customer', JSON.stringify(this.customer));
          } else {
            this.$message({
              message: '您还有未完善的选项',
              type: 'warning'
            })
            return false;
          }
        });
      }, sendeRequest(method, url, param) {  //实现更新请求的代码复用
        let _this = this;
        param = method == 'delete' ? { params: param } : param;
        this.$http[method](url, param).then(function (ret) {
          if (ret.data.code == 0) {
            _this.$notify({
              title: ret.data.msg,
              message: '😀',
              type: 'success'
            });
          } else {
            _this.$notify.error({
              title: ret.data.msg,
              message: '😭',
              type: 'error'
            });
          }
        });
      }, getOptions() {
        let _this = this;
        for (const item of this.optionsArr) {
          if (_this[item.prop].length == 0) {
            _this.$http.get(item.url).then(function (ret) {
              _this[item.prop] = ret.data;
            });
          }
        }
      }, pushLevelStar() {
        for (let i = 1; i <= 5; i++) {
          let star = { id: i, info: '' };
          for (let j = 0; j < i; j++) {
            star.info += '⭐';
          }
          this.levelStar.push(star);
        }
      }
    }, created() {
      let nowname = localStorage.getItem("reloname");
      this.juese = nowname;
      this.getRouterData(); //获取路由传递的参数
      this.getOptions();   //获取下拉列表数据
      this.pushLevelStar(); //填充等级数据
    }
  }
</script>

<style scoped>
  .customerInfo {
    padding: 30px 30px;
    margin: 30px auto;
  }

  .el-input,
  .el-select {
    width: 300px;
  }

  .el-form {
    border: 2px solid #D7DBE3;
    border-radius: 10px;
    background-color: #efefef;
  }

  .el-form-item {
    margin-bottom: 14px !important;
  }

  .locationButton {
    float: right;
    margin-top: -50px;
  }

  .customer-item {
    margin-top: 30px;
    margin-bottom: 20px;
  }

  .customerInfo>>>.el-input__inner {
    background-color: #d7d7d7 !important;
  }

  .customerInfo>>>.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:before {
    display: none;
  }
</style>